<template>
  <ele-page>
    <!-- 搜索表单 -->
    <!-- <notice-search @search="reload" /> -->
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table ref="tableRef" row-key="noticeId" :columns="columns" :datasource="datasource"
        :show-overflow-tooltip="true" v-model:selections="selections" highlight-current-row
        :export-config="{ fileName: '通知公告' }" cache-key="systemNoticeTable">
        <template #toolbar>
          <el-button type="primary" class="ele-btn-icon"  :icon="PlusOutlined"  v-permission="'system:notice:add'"  @click="openEdit()">新增</el-button>
          <el-button type="primary" class="ele-btn-icon"  :icon="PlusOutlined"  v-permission="'system:notice:add'"  @click="openEdit()">浏览</el-button>
          <el-button type="primary" class="ele-btn-icon"  :icon="PlusOutlined"  v-permission="'system:notice:add'"  @click="openEdit()">刷新</el-button>
          <el-button type="primary" class="ele-btn-icon"  :icon="PlusOutlined"  v-permission="'system:notice:add'"  @click="openEdit()">导出</el-button>
          <el-button type="primary" class="ele-btn-icon"  :icon="PlusOutlined"  v-permission="'system:notice:add'"  @click="openEdit()">预览</el-button>
        </template>
        <template #status="{ row }">
          <dict-data code="sys_notice_status" type="tag" :model-value="row.status" />
        </template>
        <template #noticeType="{ row }">
          <dict-data code="sys_notice_type" type="tag" :model-value="row.noticeType" />
        </template>
        <template #action="{ row }">
          <el-link v-permission="'system:notice:edit'" type="primary" underline="never" @click="openEdit(row)">
            修改
          </el-link>
          <el-divider v-permission="['system:notice:edit', 'system:notice:remove']" direction="vertical" />
          <el-link v-permission="'system:notice:remove'" type="danger" underline="never" @click="removeBatch(row)">
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <notice-edit v-model="showEdit" :data="current" @done="reload" />
  </ele-page>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { EleMessage } from 'ele-admin-plus';
import { PlusOutlined, DeleteOutlined } from '@/components/icons';
import { useDictData } from '@/utils/use-dict-data';
import NoticeSearch from './components/search.vue';
import NoticeEdit from './components/edit.vue';
import { pageNotices, removeNotices } from '@/api/system/notice';

defineOptions({ name: 'SystemNotice' });

/** 字典数据 */
const [typeDicts, statusDicts] = useDictData([
  'sys_notice_type',
  'sys_notice_status'
]);

/** 表格实例 */
const tableRef = ref(null);

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 50,
    align: 'center' /* ,
      fixed: 'left' */
  },
  {
    type: 'index',
    columnKey: 'index',
    width: 50,
    align: 'center' /* ,
      fixed: 'left' */
  },
  { prop: '-', label: '序号', },
  { prop: '-', label: '盘点单号', },
  { prop: '-', label: '物料编码', },
  { prop: '-', label: '物料名称', },
  { prop: '-', label: '规格尺寸', },
  { prop: '-', label: '实际盘点', },
  { prop: '-', label: '当前单价', },
  { prop: '-', label: '实际金额', },
  { prop: '-', label: '理论数量', },
  { prop: '-', label: '理论金额', },
  { prop: '-', label: '盘盈', },
  { prop: '-', label: '盘盈金额', },
  { prop: '-', label: '盘亏', },
  { prop: '-', label: '盘亏金额', },
  { prop: '-', label: '备注', },
  { prop: '-', label: 'ID', },
]);

/** 表格选中数据 */
const selections = ref([]);

/** 当前编辑数据 */
const current = ref(null);

/** 是否显示编辑弹窗 */
const showEdit = ref(false);

/** 表格数据源 */
const datasource = ({ pages, where, orders }) => {
  return pageNotices({ ...where, ...orders, ...pages });
};

/** 搜索 */
const reload = (where) => {
  tableRef.value?.reload?.({ page: 1, where });
};

/** 打开编辑弹窗 */
const openEdit = (row) => {
  current.value = row ?? null;
  showEdit.value = true;
};

/** 批量删除 */
const removeBatch = (row) => {
  const rows = row == null ? selections.value : [row];
  if (!rows.length) {
    EleMessage.error({ message: '请至少选择一条数据', plain: true });
    return;
  }
  const ids = rows.map((d) => d.noticeId);
  ElMessageBox.confirm(
    `是否确认删除公告编号为"${ids.join()}"的数据项?`,
    '系统提示',
    { type: 'warning', draggable: true }
  )
    .then(() => {
      const loading = EleMessage.loading({
        message: '请求中..',
        plain: true
      });
      removeNotices(ids)
        .then(() => {
          loading.close();
          EleMessage.success({ message: '删除成功', plain: true });
          reload();
        })
        .catch((e) => {
          loading.close();
          EleMessage.error({ message: e.message, plain: true });
        });
    })
    .catch(() => { });
};
</script>
